/* Forms.scss
 * Base styles for various input types, form layouts, and states
 * ------------------------------------------------------------- */

@import "base";
@import "compass/css3";

// Default form styling, has effect on Drupal-native forms as well as 3rd party forms

.content-column form {
  margin-bottom: 1.4em;
}


fieldset {
  border:1px solid #ccc;
  @include border-radius(3px);
  position:relative;
  margin-bottom:1.4em;
  max-width:100%;
  &.filter-wrapper { margin-bottom:1.4em; }
  legend {
    top:10px;
    left:10px;
    display:block;
    line-height: 1;
    padding:0 0.5em;
    a {
      text-decoration:none;
    }
    a:before {
      content:'- ';
    }
  }
  &.collapsed legend a:before {
    content:'+ ';
  }
}

.fieldset-wrapper {
  padding: 10px;
}

.form-item {
  margin-bottom:1.4em;
  max-width:100%;
}

html.js input.form-autocomplete {
  background-position:100% 5px;
}

.form-radios .form-item,
.form-checkboxes .form-item {
  margin-bottom:0.4em;
}

label {
  line-height: 1.4em;
  display:block;
  font-weight:bold;
}

label.option {
  display:inline;
}

// Set font for forms
label,
input,
select,
textarea {
  font-family:inherit;
  color:inherit;
  max-width:100%;
}

// Inputs, Textareas, Selects
input,
textarea,
select,
.button {
  padding: 4px;
  line-height: 1.4em;
  border: 1px solid #ccc;
  @include box-sizing(border-box);
}

input[type=checkbox],
input[type=radio] {
  cursor: pointer;
  width: auto;
  height: auto;
  padding: 0;
  margin: -2px 0 0 0;
  border:none;
}

input[type=file] {
  background-color: #fff;
  padding: initial;
  border: initial;
  line-height: initial;
  @include box-shadow(none);
}

select,
input[type=file] {
  max-width:100%;
  height: 2em; // In IE7, the height of the select element cannot be changed by height, only font-size
  line-height: 1.4em;
  *margin-top: 4px; /* For IE7, add top margin to align select with labels */
}

// Make multiple select elements height not fixed
select[multiple] {
  height: inherit;
}

textarea {
  height: auto;
}

input,
textarea,
a.button {
  $transition: border linear .2s, background-color linear .2s;
  @include transition($transition);
  @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
  @include border-radius(3px);
  background-color:#fff;
}

input:focus,
textarea:focus {
  outline: 0;
  border-color: #bbb;
  background-color:#fafafa;
}

input[type=file]:focus,
input[type=checkbox]:focus,
select:focus {
  @include box-shadow(none); // override for file inputs
  outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline
}


input[type=button],
input[type=reset],
input[type=submit],
button,
input.form-submit,
.form-actions a,
.form-actions a:visited,
.button {
  width: auto;
  height: auto;
  margin:1.4em 6px 0 0;
  padding:6px 12px 6px 12px;
  cursor:pointer;
  background-color:#fff;
  @include background-image(linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1)));
  @include magic-border(0.75);
  background-repeat:no-repeat;
  border-color:#ccc;
  @include border-radius(4px);
  $transition: border linear .4s, background-position linear .4s;
  line-height:1em; // is not a cross-browser reliable function here
  word-wrap:normal;
  overflow: visible; // needed to make ie7 respect padding and border size
  &:hover, &:focus {
    background-position:0 10px;
    border-color:#dadada;
  }
}

.container-inline {
  input[type=button],
  input[type=reset],
  input[type=submit],
  button,
  input.form-submit,
  .form-actions a,
  .form-actions a:visited {
    margin-top:0;
  }
}


// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: not-allowed;
}

// Help Text
.description {
  font-size: 11px;
  line-height: 1.4em;
}

// Error

form .error {
  border:1px solid #cc0000;
}

// Inline Form

.block-inline-form {
  form {
    input {
      display:block;
      float:left;
      font-size:1.3em;
      padding:0.7em;
      &[type=text], &.form-text {
        width:65%;
        margin:0;
        border-right:0;
        @include border-radius(5px 0 0 5px);
      }
      &[type=submit], &.form-submit {
        width:35%;
        margin:0;
        border-left:0;
        @include border-radius(0 5px 5px 0);
        @include box-shadow(none);
      }
    }
  }
}
